<template>
  <view class="container">
    <!-- 头部返回 -->
    <view class="header">
      <uni-icons 
        type="arrowleft" 
        size="24" 
        @click="goBack"
      ></uni-icons>
      <!-- <text class="title">个人信息</text> -->
    </view>

    <!-- 个人信息表单 -->
    <view class="form-container">
      <!-- 头像 -->
      <view class="form-item avatar-item">
        <text class="label">头像</text>
        <view class="avatar-wrapper">
          <image 
            :src="userInfo.avatar || '/static/image/default-avatar.png'" 
            mode="aspectFill"
            class="avatar"
            @click="changeAvatar"
          ></image>
          <uni-icons 
            type="arrowright" 
            size="16" 
            color="#999"
          ></uni-icons>
        </view>
      </view>

      <!-- 用户名 -->
      <view class="form-item">
        <text class="label">用户名</text>
        <input 
          v-model="userInfo.username" 
          placeholder="请输入用户名"
          class="input"
        />
      </view>

      <!-- 密码 -->
      <view class="form-item">
        <text class="label">密码</text>
        <view class="password-wrapper">
          <text>******</text>
          <uni-icons 
            type="arrowright" 
            size="16" 
            color="#999"
            @click="changePassword"
          ></uni-icons>
        </view>
      </view>

      <!-- 邮箱 -->
      <view class="form-item">
        <text class="label">邮箱</text>
        <input 
          v-model="userInfo.email" 
          placeholder="请输入邮箱"
          class="input"
          type="email"
        />
      </view>

      <!-- 手机号 -->
      <view class="form-item">
        <text class="label">手机号</text>
        <input 
          v-model="userInfo.phone" 
          placeholder="请输入手机号"
          class="input"
          type="tel"
        />
      </view>

      <!-- 性别 -->
      <view class="form-item">
        <text class="label">性别</text>
        <picker 
          mode="selector" 
          :range="genderOptions"
          @change="onGenderChange"
        >
          <view class="picker">
            {{ userInfo.gender || '请选择性别' }}
            <uni-icons 
              type="arrowright" 
              size="16" 
              color="#999"
            ></uni-icons>
          </view>
        </picker>
      </view>

      <!-- 地区 -->
      <view class="form-item">
        <text class="label">地区</text>
        <picker 
          mode="region" 
          @change="onRegionChange"
        >
          <view class="picker">
            {{ userInfo.region || '请选择地区' }}
            <uni-icons 
              type="arrowright" 
              size="16" 
              color="#999"
            ></uni-icons>
          </view>
        </picker>
      </view>
    </view>

    <!-- 保存按钮 -->
    <button 
      class="save-btn"
      @click="saveInfo"
    >
      保存修改
    </button>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useUserStore } from '@/stores/userdata';

const userStore = useUserStore();
const userInfo = ref({
  avatar: '',
  username: '',
  email: '',
  phone: '',
  gender: '',
  region: ''
});

const genderOptions = ['男', '女', '其他'];

// 初始化用户数据
onLoad(() => {
  if (userStore.user) {
    userInfo.value = {
      ...userInfo.value,
      ...userStore.user
    };
  }
});

// 修改头像
const changeAvatar = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      userInfo.value.avatar = res.tempFilePaths[0];
    }
  });
};

// 修改密码
const changePassword = () => {
  uni.navigateTo({
    url: '/pages/change-password/index'
  });
};

// 性别选择
const onGenderChange = (e) => {
  userInfo.value.gender = genderOptions[e.detail.value];
};

// 地区选择
const onRegionChange = (e) => {
  userInfo.value.region = e.detail.value.join(' ');
};

// 保存信息
const saveInfo = () => {
  uni.showLoading({ title: '保存中...' });
  setTimeout(() => {
    userStore.updateUser(userInfo.value);
    uni.hideLoading();
    uni.showToast({ title: '保存成功', icon: 'success' });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }, 1000);
};

// 返回
const goBack = () => {
  uni.navigateBack();
};
</script>

<style scoped>
.container {
  padding: 0;
  background: 
    linear-gradient(135deg, #e6f0ff 0%, #d0e0ff 100%),
    repeating-linear-gradient(
      45deg,
      rgba(56, 182, 255, 0.03) 0px,
      rgba(56, 182, 255, 0.03) 2px,
      transparent 2px,
      transparent 4px
    );
  min-height: 100vh;
  color: #333;
}

/* 头部样式 */
.header {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-left: 20rpx;
  color: #38b6ff;
}

/* 表单容器 */
.form-container {
  margin: 30rpx;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 16rpx;
  backdrop-filter: blur(5px);
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  overflow: hidden;
}

/* 表单项 */
.form-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28rpx 32rpx;
  border-bottom: 1px solid rgba(56, 182, 255, 0.1);
}

.form-item:last-child {
  border-bottom: none;
}

.label {
  font-size: 32rpx;
  color: #333;
}

.input {
  flex: 1;
  text-align: right;
  font-size: 30rpx;
  color: #666;
  padding-right: 20rpx;
}

/* 头像项 */
.avatar-item {
  padding: 20rpx 32rpx;
}

.avatar-wrapper {
  display: flex;
  align-items: center;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  border: 2px solid rgba(56, 182, 255, 0.3);
  box-shadow: 0 0 10px rgba(56, 182, 255, 0.2);
}

/* 密码项 */
.password-wrapper {
  display: flex;
  align-items: center;
}

/* 选择器 */
.picker {
  display: flex;
  align-items: center;
  color: #666;
}

/* 保存按钮 */
.save-btn {
  margin: 40rpx 30rpx;
  background: linear-gradient(to right, #38b6ff, #00e5ff);
  color: white;
  border: none;
  border-radius: 40rpx;
  padding: 24rpx 0;
  font-size: 32rpx;
  box-shadow: 0 0 10px rgba(56, 182, 255, 0.2);
  transition: all 0.3s ease;
}

.save-btn:active {
  transform: scale(0.96);
  box-shadow: 0 0 5px rgba(56, 182, 255, 0.3);
}
</style>
